<template>
  <div class="w-full h-full">
    <video
      v-if="src"
      autoplay
      class="w-full h-full"
      loop
      muted
      :style="{
        height: info.extension.height.value + 'px',
      }"
    >
      <source :src="src" type="video/mp4" />
    </video>
  </div>
</template>
<script>
  import { defineComponent } from 'vue'
  import { UiMixin, ChartMixin } from '@ve/mixin'
  import cloneDeep from 'lodash/cloneDeep'
  import request from '@/utils/request'
  import { GFCD } from '@/utils/utils'
  export default defineComponent({
    name: 'UiVideoCard',
    mixins: [UiMixin, ChartMixin],
    data() {
      return {
        src: '',
      }
    },
    watch: {
      info: {
        handler() {
          this.getRequestData()
        },
        deep: true,
      },
    },
    created() {
      this.infoComponent = cloneDeep(this.info)
      this.getRequestData()
    },
    mounted() {},
    methods: {
      async getImg(obj) {
        if (!obj['#FILE_SEQ#']) {
          return false
        }
        let res = await request({
          url: GFCD('dams', 'domain') + GFCD('dams', 'baseUrl'),
          method: 'post',
          data: {
            data: JSON.stringify({ FILE_SEQ: obj['#FILE_SEQ#'], '#OUTPUT_TYPE#': 'base64' }),
            method: 'dams.file.common.download',
          },
          // responseType: 'blob',
        })
        let url = `data:video/${res.data[0].FILE_SUFFIX};base64,${res.data[0].BASE64_STRING}`
        // console.log(res, url)
        // this.info.FILE_SEQ = obj['#FILE_SEQ#']
        this.src = URL.createObjectURL(this.dataURLtoFile(url))
      },
      dataURLtoFile(dataurl, filename = Date.now()) {
        var arr = dataurl.split(','),
          mime = arr[0].match(/:(.*?);/)[1],
          bstr = atob(arr[1]),
          n = bstr.length,
          u8arr = new Uint8Array(n)
        while (n--) {
          u8arr[n] = bstr.charCodeAt(n)
        }
        var theBlob = new Blob([u8arr], { type: mime })
        theBlob.lastModifiedDate = new Date()
        theBlob.name = filename
        return theBlob
      },
      getRequestData() {
        // let obj = {}
        this.getImg(this.info.extension.videoSrc?.value)
      },
    },
  })
</script>
<style>
  .uiVideoCard {
    width: 100%;
    height: 100%;
  }
</style>
